<template>
	<view class="container">
		<view class="body">
			<view class="item" v-for="(item,index) in addressList" :key="item.id">
				<view class="name-passward">
					<text>{{item.userName}}</text>
					<text>{{item.userPhone}}</text>
				</view>
				<!-- <view class="address">新华国际广场A坐1901</view> -->
				<view class="address-detail">{{item.address}}</view>
				<view class="default-ji-address">
					<view class="default-left">
						<view class="default-demo">
							<image @click="useDefault(item.id)" style="width: 30rpx;height: 30rpx;" v-if="item.isDefault=='0'"  src="/static/images/sel.png" mode=""></image>
							<image style="width: 30rpx;height: 30rpx;" v-else src="/static/images/sel_1.png" mode=""></image>						
							<text>默认寄件地址</text>
						</view>
					</view>
					<view class="default-right">
						<view @click="use(item)" class="default-demo">
							<image src="/static/images/Group48097537@2x.png" mode=""></image>
							<text>使用</text>
						</view>
						<view @click="del(item.id)" class="default-demo" style="margin-left: 40rpx;">
							<image src="/static/images/Group48097539@2x.png" mode=""></image>
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-demo footer-right" @click="goPage('/pages/userAddress/userAddress?address=add')">
				新增地址
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [],
				useflg:'',//点击使用地址保存到哪里标志
			};
		},
		onLoad(e) {
			this.useflg = e.useflg
			
			
		},
		onShow() {
			this.getList()
		},
		methods: {
			// 1.编辑地址
			goEdit(url) {
				console.log('111');
				uni.navigateTo({
					url: url
				})
			},
			// 2.删除地址
			del(addressId) {
				uni.showModal({
					title: '提示',
					content: '确认删除改地址吗？',
					success: function(res) {
						if (res.confirm) {
							let self = this
							uni.gRequest.get('address/delAddress', {
								addressId
							}).then(res => {

								uni.showToast({
									title: '删除成功',
									icon: 'none'
								})
								self.getList()
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消删除',
								icon: 'none'
							})
						}
					}
				})

			},
			// 3.获取地址
			getList() {
				let self = this
				uni.gRequest.get('address/myAddress').then(res => {
					self.addressList = res.data
				})
			},
			// 4.使用地址
			use(item) {
				
				if(this.useflg=='0'){
					// console.log('+++++++++++++',item);
					let send ={
						placeOrderName:item.userName,
						placePhone:item.userPhone,
						address:item.address
					}
					uni.setStorageSync('sendInfo',send)
					uni.navigateBack()
				}
				if(this.useflg=='1'){
					let receive = {
						sendingOrderName:item.userName,
						sendingPhone:item.userPhone,
						address:item.address				
					}
					uni.setStorageSync('reciveInfo',receive)
					uni.navigateBack()
				}
				
			},
			// 使用默认地址
			useDefault(addressId){
				
				let self =this
				
				uni.gRequest.get('address/isdefault',{
					addressId
				}).then(res=>{
					self.getList()
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}

	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}


	.container {
		height: 100%;

	}

	.body {
		padding: 20rpx;
		border-top: 1rpx #eee solid;
	}

	.item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(182, 182, 182, 0.15);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 20rpx;
		color: #999999;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}

	.name-passward {
		margin-bottom: 14rpx;

		text:first-child {
			font-size: 30rpx;
			color: #000000;
			margin-right: 20rpx;
		}
	}

	.address {
		margin-bottom: 14rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.address-detail {
		padding-bottom: 14rpx;
		border-bottom: 1rpx #eee solid;
	}

	.default-ji-address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20rpx;
		color: #999999;
		height: 60rpx;

		.default-right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.default-demo {
			display: flex;
			align-items: center;

			.uni-icons {
				color: #999999 !important;
				font-size: 20rpx;
			}


			image {
				margin-right: 10rpx;
				width: 18rpx;
				height: 18rpx;
			}
		}
	}

	.footer {
		position: absolute;
		bottom: 30rpx;
		right: 0;
		left: 0;
		text-align: center;

		color: black;

		.footer-demo {
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			color: black;
			padding: 20rpx 90rpx;
			border: 1rpx #eee solid;
		}

		.footer-left {}

		.footer-right {
			background: linear-gradient(90deg, #347DFD 0%, #4EA0FF 100%);
			color: white;
			padding: 20rpx 130rpx;
		}
	}
</style>